<template>
	<view class="home-page">
		<u--image :showLoading="true" src="/static/home/home-title.png" width="257rpx" height="54rpx"></u--image>
		<view class="swiper">
			<u-swiper height="140" keyName="image" :list="swiperList" radius="10" indicator indicatorMode="dot"
				circular></u-swiper>
		</view>
		<view class="create-title">
			<u--image :showLoading="true" src="/static/home/produce.png" width="350rpx" height="32rpx"></u--image>
		</view>
		<view class="create-box">
			<view class="left-box">
				<view class="left-ai" @click="gonavto('/pages/index/ai-text/index')">
					<view class="ai-title">
						AI文本交互
					</view>
					<view class="taste">
						<text>体验</text>
						<u--image :showLoading="true" src="/static/home/right.png" width="43.66rpx"
							height="19.58rpx"></u--image>
					</view>
				</view>
				<view class="left-gallery" @click="gonavto('/pages/index/originality/index')">
					<view class="gallery-title">
						创意画廊
					</view>
					<view class="taste">
						<text>体验</text>
						<u--image :showLoading="true" src="/static/home/right.png" width="43.66rpx"
							height="19.58rpx"></u--image>
					</view>
				</view>
			</view>
			<view class="num" @click="gonavto('/pages/index/video/index')">
				<view class="num-title">
					AI数字人
				</view>
				<view class="taste">
					<text>体验</text>
					<u--image :showLoading="true" src="/static/home/right.png" width="43.66rpx"
						height="19.58rpx"></u--image>
				</view>
			</view>
		</view>
		<view class="create-title">
			<u--image :showLoading="true" src="/static/home/show.png" width="247rpx" height="32rpx"></u--image>
		</view>
		<u-tabs :list="tabs" @click="onTabs"></u-tabs>
		<view class="_img">
			<view class="_img-item" v-for="(item,index) in list" :key="index" @click="godetails(item.id)">
				<u--image radius="20" :showLoading="true" :src="'http://gpt.szyirxx.com'+item.image"
					width="331rpx" height="331rpx"></u--image>
				<view class="_img-tips">
					{{item.tags}}
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<tabbar :value="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				swiperList: [],
				list: [],
				tabs: [],
				cate_id: 1,
				page: 1,
				status: 'loadmore',
			}
		},
		onLoad() {
			let token = uni.getStorageSync("token") || ''
			if (token == '') {
				uni.showToast({
					title: '请先登录！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}, 1000)
			} else {
				this.postswiper()
				this.posttabs()
			}
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.postList()
		},
		methods: {
			posttabs() {
				this.$Request({
					method: 'POST',
					url: '/index/getCateList'
				}).then(res => {
					if (res.data.code == 1) {
						this.tabs = res.data.data
						this.tabs.map(item => {
							item.status = false
						})
						this.tabs[0].status = true
						this.cate_id = this.tabs[0].id
						this.postList()
					}
				})
			},
			postList() {
				let params = {
					cate_id: this.cate_id,
					page: this.page,
					limit: 10
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/index/getWorksList'
				}).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.data.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.data.data.data
						} else {
							res.data.data.data.map(item => {
								this.list.push(item)
							})
						}
					}
				})
			},
			postswiper() {
				this.$Request({
					method: 'POST',
					url: '/index/getBannerList'
				}).then(res => {
					if (res.data.code == 1) {
						let arrswiper = res.data.data
						arrswiper.map((item) => {
							item.image = 'http://gpt.szyirxx.com' + item.image
						})
						this.swiperList = arrswiper
					}
				})
			},
			godetails(e) {
				uni.navigateTo({
					url: '/pages/index/details/index?id=' + e
				})
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			},
			onTabs(i) {
				this.tabs.map(item => {
					item.status = false
				})
				this.tabs[i.index].status = true
				this.cate_id = this.tabs[i.index].id
				this.page = 1
				this.postList()
			}
		}
	}
</script>

<style lang="scss">
	.home-page {
		padding: 30rpx 30rpx 120rpx 30rpx;

		.indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 30px;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
		}

		.swiper {
			margin-top: 30rpx;
		}

		.create-title {
			padding: 30rpx 0;
		}

		.create-box {
			display: flex;
			justify-content: space-between;

			.left-box {
				.left-ai {
					width: 331rpx;
					background-image: url('/static/home/text.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					padding: 20rpx;

					.ai-title {
						font-size: 32rpx;
						font-weight: 700;
					}

					.taste {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						text {
							margin-right: 15rpx;
							color: #333333;
						}
					}
				}

				.left-gallery {
					margin-top: 20rpx;
					width: 331rpx;
					padding: 20rpx;
					background-image: url('/static/home/gallery.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.gallery-title {
						font-size: 32rpx;
						font-weight: 700;
					}

					.taste {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						text {
							margin-right: 15rpx;
							color: #333333;
						}
					}
				}
			}

			.num {
				width: 331rpx;
				background-image: url('/static/home/num.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 20rpx;

				.num-title {
					font-size: 32rpx;
					font-weight: 700;
				}

				.taste {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					margin-top: 170rpx;

					text {
						margin-right: 15rpx;
						color: #333333;
					}
				}
			}
		}

		._img {
			margin-top: 10rpx;

			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			._img-item {
				margin-top: 20rpx;
				position: relative;

				._img-tips {
					width: 90rpx;
					height: 40rpx;
					background-color: rgba(255, 255, 255, 0.1);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
	}
</style>